<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>事故树建模工具</title>

    <link rel="stylesheet" href="resources/css/bootstrap.css"/>
    <link rel="stylesheet" href="resources/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="resources/css/jquery-ui.css"/>
    <link rel="stylesheet" href="resources/css/main.css"/>
    <link rel="stylesheet" href="resources/css/accidentTree.css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="resources/js/html5shiv.min.js"></script>
    <script src="resources/js/respond.min.js"></script>
    <![endif]-->

    <script>
        //document.oncontextmenu = function(){return false;};
    </script>
</head>
<body>

    <nav id="topNavbar" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid" style="padding-left: 0px; padding-right: 0px;">

            <div class="navbar-collapse collapse pull-left">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-expanded="false">文件 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="javascript:;" onclick="saveTreeData()">保存</a></li>
                            <li>
                                <a href="javascript:;" onclick="saveToImg()">保存为图片</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-expanded="false">编辑 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="javascript:;" data-toggle="modal" data-target="#showTreeDataModal">显示树数串</a></li>
                            <li><a href="javascript:;" data-toggle="modal" data-target="#loadTreeDataModal">加载数据串</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-expanded="false">设置 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <!--<li><a href="javascript:;" data-toggle="modal" data-target="#connectorLineColorSettingModal">连线颜色</a></li>
                            <li class="divider"></li>
                            <li><a href=""#>画布背景设置</a></li>-->
                            <li><a href="javascript:;" data-toggle="modal" data-target="#canvasSizeSettingModal">画布大小设置</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-expanded="false">计算 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="javascript:;" onclick="geji()">割集</a></li>
                            <!--<li><a href="javascript:;">径集</a></li>
                            <li><a href="javascript:;">顶上事件概率</a></li>-->
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-expanded="false">帮助 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <!--<li><a href="javascript:;">使用手册</a></li>-->
                            <li><a href="javascript:;" data-toggle="modal" data-target="#versionLogModal">版本日志</a></li>
                            <!--<li><a href="javascript:;">开发人员</a></li>-->
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="navbar-header pull-right">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand" style="color: #FFF;"><i class="fa fa-sitemap fa-lg"></i> 事故树建模工具</span>
            </div>

            <!-- 显示数据串模态窗 -->
            <div id="showTreeDataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">显示数据串</h4>
                        </div>
                        <div class="modal-body" style="height: 360px; overflow: auto;">
                            <span id="treeDataStr"></span>

                        </div>
                        <div class="modal-footer">
                            <button id="selectAllCopy" type="button" class="btn btn-primary">全选复制</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 加载数据串模态窗 -->
            <div id="loadTreeDataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">加载数据串</h4>
                        </div>
                        <div class="modal-body">
                            <textarea id="treeDataTextarea" class="form-control" style="height: 300px;"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="loadTreeData()">开始加载</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 连线颜色设置 -->
            <div id="connectorLineColorSettingModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">连线颜色设置</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="">保存设置</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 画布大小设置模态窗口 -->
            <div id="canvasSizeSettingModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">画布大小设置</h4>
                        </div>
                        <div class="modal-body">
                            <!--<div class="alert alert-danger" style="padding: 10px;">
                                <span>宽度与高度设置不能低于默认值</span><br/>
                            </div>-->
                            <form>
                                <div class="form-group">
                                    <label for="canvasWidthInput" class="control-label">横向宽度</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="canvasWidthInput">
                                        <span class="input-group-addon">PX</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="canvasHeightInput" class="control-label">纵向高度</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="canvasHeightInput">
                                        <span class="input-group-addon">PX</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="saveCanvasSizeSetting()">保存设置</button>
                            <!--<button type="button" class="btn btn-info">恢复默认</button>-->
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 版本日志模态窗 -->
            <div id="versionLogModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">版本日志</h4>
                        </div>
                        <div id="versionLogBody" class="modal-body"
                             style="height: 400px; padding: 0px;">
                            <iframe src="versionLog.html" style="width: 100%; height: 100%; border: 0px;"></iframe>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </nav>

    <div class="container-fluid" style="padding-left: 0px; padding-right: 0px;">
        <div class="row-fluid">
            <div id="main">
                <div id="toolbarDiv" class="col-xs-1">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><i class="fa fa-wrench fa-2x"></i></div>
                        <div class="panel-body" style="padding-top: 10px;">
                            <div id="dssjTool" class="tool" data-nodeType="T" title="顶上事件">
                                <img src="resources/images/rectangle-tool.png" style="width: 36px; height: 35px;">
                                <span style="position: absolute; top: 6px; left: 17px;
                                    font-weight: bold; font-size: 15px; color: #777777;">顶</span>
                            </div>
                            <div id="zjsjTool" class="tool" data-nodeType="M" style="" title="中间事件">
                                <img src="resources/images/rectangle-tool.png" style="width: 36px; height: 35px;">
                            </div>
                            <div id="jbsjTool" class="tool" data-nodeType="X" style="" title="基本事件">
                                <img src="resources/images/circle-tool.png" style="width: 36px; height: 36px;">
                            </div>
                            <div id="slsjTool" class="tool" data-nodeType="X" style="" title="省略事件">
                                <img src="resources/images/diamond-tool.png" style="width: 40px; height: 40px;">
                            </div>
                            <div id="zcsjTool" class="tool" data-nodeType="X" style="" title="正常事件">
                                <img src="resources/images/zcsj-tool.png" style="width: 40px; height: 40px;">
                            </div>
                            <div id="ymTool" class="tool" data-nodeType="YM" style="" title="与门">
                                <img src="resources/images/yumen.png" style="width: 42px; height: 35px;">
                            </div>
                            <div id="hmTool" class="tool" data-nodeType="HM" style="" title="或门">
                                <img src="resources/images/huomen.png" style="width: 42px; height: 35px;">
                            </div>
                            <!--<div id="tjTool" class="tool" data-nodeType="C" data-type="" style="">
                                条件
                            </div>-->
                        </div>
                    </div>
                </div>
                <!-- 画布容器 -->
                <div class="col-xs-11 canvasContainer" id="canvasContainer">

                    <div id="accidentTreeCanvas">

                    </div>

                    <div id="accidentTreeCanvasContentMenu" class="contentMenu"
                         style="min-width: 180px; width: auto;">
                        <ul class="dropdown-menu" style="display: block;">
                            <li>
                                <a class="" href="javascript:;" onclick="refreshMain()">
                                    <i class="fa fa-refresh fa-lg"></i> 刷新应用 (E)
                                </a>
                            </li>
                            <li>
                                <a class="" href="javascript:;" onclick="clearTree()">
                                    <i class="fa fa-trash fa-lg"></i> 清空画布 (C)
                                </a>
                            </li>
                            <li>
                                <a class="" href="javascript:;" onclick="resetCanvasSize()">
                                    <i class="fa fa-square-o fa-lg"></i> 重置画布大小 (V)
                                </a>
                            </li>
                            <li>
                                <a class="" href="javascript:;" onclick="checkTreeData('1')">
                                    <i class="fa fa-check-circle-o fa-lg"></i> 校验数据正确性 (W)
                                </a>
                            </li>
                            <!--<li class="dropdown-submenu">
                                <a tabindex="-1" href="#"><i class="fa fa-plus fa-lg"></i> 新建</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">顶上事件</a></li>
                                    <li><a href="#">中间事件</a></li>
                                </ul>
                            </li>-->

                        </ul>
                    </div>
                    <div id="treeNodeContentMenu" class="contentMenu"
                         style="min-width: 120px; width: auto;">
                        <ul class="list-group">
                            <!--<a class="list-group-item" href="javascript:;" onclick="">
                                <i class="fa fa-list-alt fa-lg"></i> 查看信息
                            </a>-->
                            <a class="list-group-item" href="javascript:;" onclick="removeTreeNode()">
                                <i class="fa fa-trash fa-lg"></i> 删除节点 (D)
                            </a>
                        </ul>
                    </div>

                </div>

                <div id="showInfoDivBtn" style="position: absolute; right: -1px; z-index: 10;">
                    <a href="javascript:;" class="btn btn-danger btn-sm" onclick="hideInfoDiv(this)" title="显示信息栏">
                        <i class="fa fa-list-alt fa-2x"></i>
                    </a>
                </div>
                <div id="infoDiv" class="col-xs-2 cbp-spmenu cbp-spmenu-right">
                    <!-- 使用一个隐藏域来保存当前单击选中的节点ID -->
                    <input type="hidden" id="currentNodeId" value="" />
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <i class="fa fa-list-alt fa-lg"></i> 节点信息
                            <span class="pull-right">
                                <a href="javascript:;" style="color: #FFF;" onclick="hideInfoDiv(this)" title="隐藏信息栏">
                                    <i class="fa fa-sign-out fa-lg"></i>
                                </a>
                            </span>
                        </div>
                        <div class="panel-body">
                            <div>
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#nodeInfoPane" data-toggle="tab">基本信息</a></li>
                                    <li><a href="#styleInfoPanel" data-toggle="tab">样式信息</a></li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div class="tab-pane active" id="nodeInfoPane">
                                        <form id="nodeInfoForm" class="form-horizontal col-md-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">KEY</span>
                                                    <input id="nodeKeyInput" type="text" class="form-control" placeholder="" disabled
                                                           onkeydown="">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">名称</span>
                                                    <input id="nodeNameInput" type="text" class="form-control infoInput" placeholder="">
                                                </div>
                                            </div>
                                            <!--<div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">类型</span>
                                                    <input id="nodeTypeInput" type="text" class="form-control" placeholder="" disabled
                                                           onkeydown="">
                                                </div>
                                            </div>-->
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">编号</span>
                                                    <input id="nodeNumberInput" type="text" class="form-control" placeholder="" disabled
                                                           onkeydown="">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="styleInfoPanel">
                                        <form id="styleInfoForm" class="form-horizontal col-md-12">

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">宽度</span>
                                                    <input id="nodeWidthInput" type="text" class="form-control infoInput" placeholder="">
                                                    <span class="input-group-addon">PX</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">高度</span>
                                                    <input id="nodeHeightInput" type="text" class="form-control infoInput" placeholder="">
                                                    <span class="input-group-addon">PX</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">X坐标</span>
                                                    <input id="nodeXInput" type="text" class="form-control infoInput" placeholder="">
                                                    <span class="input-group-addon">PX</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">Y坐标</span>
                                                    <input id="nodeYInput" type="text" class="form-control infoInput" placeholder="">
                                                    <span class="input-group-addon">PX</span>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="resources/js/jquery-1.9.1.js"></script>
    <script src="resources/js/jquery-ui-1.9.2.min.js"></script>
    <script src="resources/js/jquery.ui.touch-punch-0.2.2.min.js"></script>

    <script src="resources/js/underscore.js"></script>
    <script type="text/javascript">
        // 将Underscore对象重命名为us, 后面都通过us来访问和创建Underscore对象
        var us = _.noConflict();
    </script>

    <!-- JsPlumb -->
    <script src="resources/js/jsplumb/lib/katavorio-0.6.js"></script>
    <script src="resources/js/jquery.jsPlumb-1.7.5.js"></script>
    <script src="resources/js/jsplumb/dom.jsPlumb.js"></script>
    <script src="resources/js/underscore.js"></script>

    <script src="resources/js/bootstrap.js"></script>
    <script src="resources/js/zclip/jquery.zclip.min.js"></script>
    <script src="resources/js/classie.js"></script>

    <script src="resources/js/ui.js"></script>
    <script src="resources/js/accidentTree.js"></script>
    <script src="resources/js/calculate.js"></script>
    <script src="resources/js/cutset.js"></script>
    <script src="resources/js/custom.js"></script>

    <script type="text/javascript">

        $(function(){
            
        });

    </script>

</body>
</html>